<template>
  <div class="p-4 space-y-2">
    <div class="flex space-x-1">
      <template v-for="(widget, index) in wks" :key="index">
        <div class="flex flex-col items-center space-y-1">
          <button
            class="btn btn-sm btn-primary btn-soft w-[100px]"
            @click="active(widget)"
          >
            {{ widget }} Active
          </button>
          <button
            class="btn btn-sm btn-primary btn-soft w-[100px]"
            @click="hide(widget)"
          >
            {{ widget }} Hidden
          </button>
          <button
            class="btn btn-sm btn-primary btn-soft w-[100px]"
            @click="destroy(widget)"
          >
            {{ widget }} Destroy
          </button>
        </div>
      </template>
    </div>
    <div class="h-[2px] rounded bg-black opacity-60"></div>

    <template v-for="(widget, index) in wks" :key="index">
      <WidgetContainer :widget-key="widget">{{ widget }} </WidgetContainer>
    </template>
  </div>
</template>

<script setup lang="ts">
import WidgetContainer from '@xw11/widget-container';
import { WidgetKey } from '@/plugins/widget-container';
import { useWidgetStore } from '@xw11/widget-container';
const wks = WidgetKey.$getKeys();
const widgetStore = useWidgetStore();

const { active, hide, destroy } = widgetStore;
</script>

<style scoped></style>
